body {
    background: linear-gradient(215deg, #2c3e50, #27ae60, #2980b9, #e74c3c, #8e44ad);
    background-size: 500%;
    background-attachment:fixed;
    animation: backgroundframe 15s infinite linear;
}

@keyframes backgroundframe {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

a  {
    text-decoration: none;
}

h1 {
    margin-top: 100px;
    font-size: 120px;
    text-align: center;
    color: #4c79e2;
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.731);
    font-weight: 1000;
    text-shadow: 10px 10px 10px gray;
}

.mian {
   margin: 0 auto;
   width: 1300px;
   height: 300px;
   background-color: rgba(135, 207, 235, 0.42);
   display: flex;
   border-radius: 50px;
   transition: 0.2s linear;
}
.box {
    width: 200px;
    height: 60px;
    margin-left: 40px;
    background-color: skyblue;
    border-radius: 50px;
    margin-top: 120px;
    text-align: center;
    line-height: 60px;
    font-size: 28px;
    transition: 0.2s linear;
    color: white;
    -webkit-text-stroke: 0.5px rgba(128, 128, 128, 0.553);
}
.box1 {
    width: 280px;
}

.box:hover {
    height: 200px;
    margin-top: 50px;
    background-color: rgba(127, 206, 237, 0.324);
    line-height: 200px;
    font-size: 39px;
}
.box1:hover {
    background-color: #34c3a96b;
    font-family: '华文彩云';
    text-shadow: 10px 10px 10px gray;
}
.box2:hover {
    background-color: #a86b4d45;
    font-family: '华文琥珀';
    text-shadow: 10px 10px 10px gray;
}
.box3:hover {
    background-color: #8aad4456;
    font-family: '华文新魏';
    text-shadow: 10px 10px 10px gray;
}
.box4:hover {
    font-size: 90px;
    background-color: #8d44ad56;
    font-family: '华文行楷';
    text-shadow: 10px 10px 10px gray;
}
.box5:hover {
    font-size: 90px;
    background-color: #27ae5f91;
    font-family: '隶书';
    text-shadow: 10px 10px 10px gray;
}
